<template>
	<view class="flex-col justify-center align-center">
		<image :src="current" :class="[{md:size=='md'}, {sm:size=='sm'}]" mode="widthFix"></image>
		<view class="notext margin-tb" :class="{ col: col }">{{text}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: '1'
			},
			text: {
				type: String,
				default: '暂 未 开 放 · 敬 情 期 待'
			},
			col: {
				type: Boolean,
				default: false
			},
			size: {
				type: String,
				default: 'md'
			},
		},
		data() {
			return {
				list: [{
					type: 1,
					img: '../../static/images/none-1.png'
				}, {
					type: 2,
					img: '../../static/images/none-2.png'
				}, {
					type: 3,
					img: '../../static/images/none-3.png'
				}, {
					type: 4,
					img: '../../static/images/none-4.png'
				}, {
					type: 5,
					img: '../../static/images/none-5.png'
				}, {
					type: 6,
					img: '../../static/images/none-6.png'
				}, {
					type: 7,
					img: '../../static/images/none-7.png'
				}]
			};
		},
		computed: {
			current() {
				return this.list.find(item => item.type == this.type).img
			}
		}
	}
</script>

<style lang="scss">
	.md {
		width: 400rpx;
	}

	.sm {
		width: 200rpx;
	}

	.notext {
		color: #999999;
		letter-spacing: 4rpx;

		&.col {
			width: 32rpx;
			text-align: center;
		}
	}
</style>
